<template>
  <div id="app" :class="{ 'dark': isDark }">
    <config-error-boundary>
      <Toast ref="toastRef" />
      <nav-header />
      <particles-background />
      <router-view v-slot="{ Component }">
        <transition name="fade" mode="out-in">
          <component :is="Component" :key="$route.fullPath" />
        </transition>
      </router-view>
      <theme-toggle />
    </config-error-boundary>
  </div>
</template>

<script setup>
import { onMounted, computed, ref } from 'vue'
import { useThemeStore } from './stores/theme'
import NavHeader from './components/NavHeader.vue'
import ParticlesBackground from './components/ParticlesBackground.vue'
import ThemeToggle from './components/ThemeToggle.vue'
import ConfigErrorBoundary from './components/ConfigErrorBoundary.vue'
import Toast from './components/Toast.vue'
import { useToast } from './composables/useToast'

const themeStore = useThemeStore()
const isDark = computed(() => themeStore.isDark)
const toastRef = ref(null)
const toast = useToast()

onMounted(() => {
  // 初始化主题
  document.documentElement.classList.toggle('dark', isDark.value)
  toast.setToastComponent(toastRef.value)

  // 检测系统主题
  const darkMode = window.matchMedia('(prefers-color-scheme: dark)')
  const setTheme = (dark) => {
    document.documentElement.setAttribute('data-theme', dark ? 'dark' : 'light')
  }
  
  setTheme(darkMode.matches)
  darkMode.addEventListener('change', (e) => setTheme(e.matches))
})
</script>

<style lang="scss">
:root {
  --primary-color: #42b883;
  --primary-color-rgb: 66, 184, 131;
  --background-color: #ffffff;
  --background-color-rgb: 255, 255, 255;
  --text-color: #2c3e50;
}

.dark {
  --background-color: #1a1a1a;
  --background-color-rgb: 26, 26, 26;
  --text-color: #ffffff;
}

#app {
  font-family: 'Source Code Pro', monospace;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--text-color);
  background-color: var(--background-color);
  min-height: 100vh;
  transition: background-color 0.3s, color 0.3s;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

@media (max-width: 768px) {
  #app {
    padding: 0 16px;
  }
}
</style> 